<!-- 地区销量趋势堆叠图 -->

<template>
	<div class="com-container">
		<div class="title" :style="comStyle">
			<span>{{'▎' + showTitle}}</span>
			<span :style="comStyle" @click="showChoice = !showChoice" class="iconfont title-icon">&#xe6eb</span>
			<div :style="marginStyle" class="select-con" v-show="showChoice">
				<div @click="handleSelect(item.key)" class="select-item" v-for="item in selectTypes" :key="item.key">
					{{item.text}}
				</div>
			</div> 
		</div>
		<div class="com-chart" ref="trend_ref"></div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import { getThemeValue } from '@/utils/theme_utils'
	
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null,
				showChoice: false,
				choiceType: 'map',
				titleFontSize: 0,
			}
		},
		
		created() {
			this.$socket.registerCallBack('trendData', this.getData)
		},
		
		mounted() {
			this.initChart()
			// this.getData()
			this.$socket.send({
				action: 'getData',
				socketType: 'trendData',
				chartName: 'trend',
				value: ''
			})
			window.addEventListener('resize', this.screenAdapter)
			this.screenAdapter()
		},

		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
			this.$socket.unRegisterCallBack('trendData')
		},
		
		watch: {
			theme() {
				this.chartInstance.dispose()
				this.initChart()
				this.screenAdapter()
				this.updateChart()
			}
		},
		
		computed: {
			...mapState(['theme']),
			selectTypes() {
				if (!this.allData) {
					return []
				} else {
					return this.allData.type.filter(item => {
						return item.key !== this.choiceType
					})
				}
			},
			showTitle() {
				if (!this.allData) {
					return ''
				} else {
					return this.allData[this.choiceType].title
				}
			},
			
			comStyle() {
				return {
					fontSize: this.titleFontSize + 'px',
					color: getThemeValue(this.theme).titleColor
				}
			},
			
			marginStyle() {
				return {
					marginLeft: this.titleFontSize + 'px'
				}
			},
		},

		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme)
				const initOption = {
					grid: {
						left: '3%',
						top: '35%',
						right: '4%',
						bottom: '1%',
						containLabel: true
					},
					legend: {
						right: '15%',
						top: '15%',
						icon: 'circle'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false
					},
					yAxis: {
						type: 'value'
					},
				}
				this.chartInstance.setOption(initOption)
			},
			async getData(res) {
				// const {
				// 	data: res
				// } = await this.$http.get('trend')
				this.allData = res
				this.updateChart()
			},

			updateChart() {
				// 半透明的颜色值
				const colorArr1 = [
					'rgba(11, 168, 44, 0.5)',
					'rgba(44, 110, 255, 0.5)',
					'rgba(22, 242, 217, 0.5)',
					'rgba(254, 33, 30, 0.5)',
					'rgba(250, 105, 0, 0.5)'
				]
				// 全透明的颜色值
				const colorArr2 = [
					'rgba(11, 168, 44, 0)',
					'rgba(44, 110, 255, 0)',
					'rgba(22, 242, 217, 0)',
					'rgba(254, 33, 30, 0)',
					'rgba(250, 105, 0, 0)'
				]

				const timeArr = this.allData.common.month
				const valueArr = this.allData[this.choiceType].data
				const seriesArr = valueArr.map((item, index) => {
					return {
						name: item.name,
						type: 'line',
						data: item.data,
						stack: this.choiceType,
						areaStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: colorArr1[index]
								},
								{
									offset: 1,
									color: colorArr2[index]
								}
							])
						}
					}
				})
				const legendArr = valueArr.map(item => {
					return item.name
				})

				const dataOption = {
					xAxis: {
						data: timeArr
					},
					legend: {
						data: legendArr
					},
					series: seriesArr
				}
				this.chartInstance.setOption(dataOption)
			},

			screenAdapter() {
				this.titleFontSize = this.$refs.trend_ref.offsetWidth / 100 * 3.6
				
				const adapterOption = {
					legend: {
						itemWidth: this.titleFontSize,
						itemHeight: this.titleFontSize,
						itemGap: this.titleFontSize,
						textStyle: {
							fontSize: this.titleFontSize / 2
						}
					}
				}
				this.chartInstance.setOption(adapterOption)
				this.chartInstance.resize()
			},

			handleSelect(currentType) {
				this.choiceType = currentType
				this.updateChart()
				this.showChoice = false
			},
		},
	}
</script>

<style lang="less" scoped>
	.title {
		position: absolute;
		left: 20px;
		top: 20px;
		z-index: 10;
		color: #fff;

		.title-icon {
			margin-left: 10px;
			cursor: pointer;
		}
		
		.select-con {
			background-color: #222733;
		}
	}
</style>
